<template>
  <div class="" style="height: 100%">
    <div
      :style="{
        height: getscalepxc(14),
        paddingLeft: getscalepxc(14),
        marginTop: getscalepxc(5),
      }"
    >
      <btnlist :btlist="btnlist" @btnclick="btnclick"> </btnlist>
    </div>
    <tongyongbasechart :options="options" :style="{
        height: `calc(100% - ${getscalepxc(19)})`,
      }"/>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from "@/utils/requestdp";
import dayjs from 'dayjs'

export default {
  name: "quanwangshishichart",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      btnlist: [
        {
          name: "实时供热量",
        },
        // {
        //   name: "日累计供热量",
        // },
      ],
      options:{}
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.loadData();
    this.interval =setInterval(() => {
      this.loadData();
    }, 5 * 60 * 1000)
  },
  destroyed() {
    clearInterval(this.interval)
  },
  methods: {
    btnclick(type) {
      console.log(type);
    },
    loadData() {
      let day = dayjs().format("YYYY-MM-DD")
      let st = dayjs(day + ' 00:00:00').unix()
      let et = dayjs(day + ' 23:59:59').unix()
      let queryJson = {
        queries: [
          {
            metric: 'id,sa_003qc',
            schema: 'dwb'
          }
        ],
        table: 'pipenet_m',
        orderBy: 'aligntime',
        startTime: st,
        endTime: et,
        type: 'history',
        needType: false,
        search: 'id=0'
      };
      axios.post("/open/queryDb", queryJson).then(res => {
        let rs = res.rows;
        let xAxisList = [];
        let seriesData = [];
        if (rs.length > 0) {
          xAxisList = rs.map(v => v.aligntime);
          seriesData = rs.map(v => v['sa_003qc']);
        }
        this.options = {
            color: ["#9AE48D"],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisList
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: seriesData,
                type: 'line',
                areaStyle: {
                  color: '#9AE48D33'
                }
            }]
          };
      });
    }
  },
};
</script>
<style lang='scss'>

</style>